<template>
    <div>
        <el-alert
            title="该指令使用 appendChild 与 removeChild 结合 vuex 实现，所以 有 v-acl 指令的元素 最好使用单独的元素包裹，避免元素位置发生变化！"
            type="warning"
            show-icon
            :closable="false">
        </el-alert>

        <div class="mt10">
            <el-checkbox-group v-model="group" @change="gourpChange">
                <el-checkbox-button v-for="per in permissionsList" :label="per.value" :key="per.value">
                    {{per.label}}
                </el-checkbox-button>
            </el-checkbox-group>
        </div>

        <div class="m10">{{permissions}}</div>
        
        <div>
            <el-button  v-acl="true" type="success">布尔值</el-button>
            <el-button  v-acl="'string'" type="success">字符串</el-button>
            <el-button  v-acl="() => 'function'" type="success">函数</el-button>
            <el-button  v-acl="{'object': true, 'function': false}" type="success">对象</el-button>
            <el-button  v-acl="[{ 'object': true }, 'array']" type="success">数组</el-button>
        </div>
        
        <div class="markdown-body">
            <AclTpl></AclTpl>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import AclTpl from './md/acl.md';

export default {
    components: {
        AclTpl
    },
    data() {
        return {
            permissionsList: [
                {label: '布尔值', value: 'boolean'},
                {label: '字符串', value: 'string'},
                {label: '函数', value: 'function'},
                {label: '对象', value: 'object'},
                {label: '数组', value: 'array'},
            ],
            group: []
        }
    },
    computed: {
        ...mapState(['auth']),
        permissions() {
            return JSON.stringify(this.auth.permissions)
        }
    },
    methods: {
        gourpChange(el) {
            this.$store.dispatch('setPermissions', this.group)
        }
    },
}
</script>

<style lang="scss" scoped>
@import '~@/assets/styles/default.scss';
</style>